<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    type: null,
    agvId: null,
  }),
  agvSelect: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const agvSelect = ref(props.agvSelect);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="50px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="newFormInline.type">
            <el-radio :label="0">随机</el-radio>
            <el-radio :label="1">指定车辆</el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.type == 1">
        <el-form-item label="车辆" prop="agvId">
          <el-select v-model="newFormInline.agvId" filterable clearable placeholder="请选择车辆" style="width:100%">
            <el-option
              v-for="item in agvSelect"
              :key="item.AgvId"
              :label="item.AgvName"
              :value="item.AgvId">
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio{
  margin-right: 16px;
}
</style>
